<script setup lang="ts">
import { APP_CONFIG } from '~/config'

const { $sanitizeHtml } = useNuxtApp()
const { id } = useRoute().params
const { currentCategoryId, categoryId } = useRoute().query

const { data } = await useAsyncData(`newsDetail:${id}`, () => useApiFetch(`/app/articleCategory/flowarticle/${id}?categoryId=${currentCategoryId}`))

// 获取新闻动态
const { data: newsData } = await useAsyncData('notice', () => useApiFetch(`/app/articleCategory/pagearticle/${APP_CONFIG.newsCategoryId}?pageNum=1&pageSize=10`))

// 获取项目推荐
const { data: projectData } = await useAsyncData('project', () => useApiFetch(`/app/articleCategory/pagearticle/${APP_CONFIG.projectRecommendCategoryId}?pageNum=1&pageSize=10`))

const newsList = newsData.value?.data?.rows || []

const projectList = projectData.value?.data?.rows ?? []

const info = ref(data.value?.data)

const sanitizedContent = $sanitizeHtml(info.value.data?.content)
</script>

<template>
  <main>
    <div class="banner-container" />
    <section class="flex w-[1200px] justify-between mx-auto pb-[50px]">
      <div class="w-[915px] mt-[40px]">
        <n-tabs type="line">
          <n-tab name="幸福">
            {{ info.data?.category?.categoryName }}
          </n-tab>
          <template #suffix>
            <div class="flex items-center mt-[10px] text-[12px] text-[#808080]">
              <UnoIcon class="i-carbon:home" />
              <span>首页</span>
              <UnoIcon class="i-carbon:chevron-right" />
              <span>{{ info.data?.category.categoryNames[0] }}</span>
              <UnoIcon class="i-carbon:chevron-right" />
              <span>{{ info.data?.category.categoryNames[1] }}</span>
            </div>
          </template>
        </n-tabs>
        <div>
          <h1 class="text-[24px] leading-[32px] font-bold mt-[35px] mb-[16px] text-center">
            {{ info.data.title }}
          </h1>
          <p class="text-[12px] text-[#808080] text-center font-sans pb-[20px] ">
            {{ info.data.publishTime }} 来源：本站 点击：{{ info.data.viewCount }}
          </p>
          <div id="Article-content" class="py-[16px] border-b border-t border-[#e6e6e6] ql-editor" v-html="sanitizedContent" />
          <n-el class="w-100% flex justify-center mt-[30px]">
            <div class="flex w-[50%] h-[28px] bg-[#e6e6e6] mr-[40px] leading-[28px] text-[#808080]">
              <div class="w-[28px] h-[28px] flex justify-center items-center text-white"
                :style="{ background: 'var(--primary-color)' }">
                <UnoIcon class="i-carbon:chevron-left" />
              </div>
              <NuxtLink :to="`/news/${info.last?.id}?categoryId=${categoryId}&currentCategoryId=${currentCategoryId}`"
                class="text-[12px] ml-[15px]">
                {{ info.last?.title }}
              </NuxtLink>
            </div>
            <div class="w-[50%] flex justify-end bg-[#e6e6e6] leading-[28px] text-[#808080]">
              <NuxtLink :to="`/news/${info.next?.id}?categoryId=${categoryId}&currentCategoryId=${currentCategoryId}`" target="_blank"
                class="text-[12px] ml-[15px] overflow-hidden whitespace-nowrap text-ellipsis">
                {{ info.next?.title }}
              </NuxtLink>
              <div class="w-[28px] h-[28px] flex justify-center items-center text-white bg-[var(--primary-color)]">
                <UnoIcon class="i-carbon:chevron-right" />
              </div>
            </div>
          </n-el>
        </div>
      </div>
      <div class="right-container">
        <div class="news-container">
          <div class="pt-[8px] px-[20px] text-white">
            <h3 class="text-[20px]">
              最新动态
            </h3>
            <small class="text-[14px] text-[#ffcaca]">NEWS</small>
          </div>
          <ul class="px-[12px] text-[12px] text-[#4c4c4c] leading-[20px] pb-[12px]">
            <li v-for="item in newsList" :key="item.id" class="mt-[10px]">
              <p>
                <NuxtLink :to="`/news/${item.id}?categoryId=${item.parentCategoryId}&currentCategoryId=${item.categoryId}`">
                  {{ item.title }}
                </NuxtLink>
              </p>
              <p class="text-[#999]">
                {{ item.publishTime }}
              </p>
            </li>
          </ul>
        </div>
        <div class="project-container">
          <div class="pt-[8px] px-[20px] text-white">
            <h3 class="text-[20px]">
              项目推荐
            </h3>
            <small class="text-[14px] text-[#cbe4fe]">PROJECT RECOMMENDATION</small>
          </div>
          <ul class="px-[12px] text-[12px] text-[#4c4c4c] leading-[20px] pb-[12px]">
            <li v-for="item in projectList" :key="item.id" class="mt-[10px]">
              <p>
                <NuxtLink :to="`/news/${item.id}?categoryId=${item.parentCategoryId}&currentCategoryId=${item.categoryId}`">
                  {{ item.title }}
                </NuxtLink>
              </p>
              <p class="text-[#999]">
                {{ item.publishTime }}
              </p>
            </li>
          </ul>
        </div>
      </div>
    </section>
  </main>
</template>

<style scoped>
.banner-container {
  width: 100%;
  height: 355px;
  background: url("http://jmrh.dumi.info/templates/main/uploadfile/image/init/banner5.jpg") no-repeat center center;
  background-size: auto 100%;
  border-bottom: 4px solid #c00;
}

.right-container {
  width: 250px;
  margin-top: 30px;
}

.right-container .news-container,
.right-container .project-container {
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(111, 111, 111, .2);
}

.right-container .news-container {
  background: url('http://jmrh.dumi.info/templates/main/images/bg_kuai1.png') no-repeat center top;
}

.right-container .project-container {
  background: url('http://jmrh.dumi.info/templates/main/images/bg_kuai2.png') no-repeat center top;
  margin-top: 20px;
}

::v-deep(.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--top .n-tabs-nav-scroll-content),
::v-deep(.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--top .n-tabs-nav__suffix) {
  border-bottom: 2px solid #ccc;
}

::v-deep(.n-tabs .n-tabs-tab) {
  font-size: 32px;
  color: #4c4c4c
}

::v-deep(.n-tabs.n-tabs--line-type .n-tabs-tab.n-tabs-tab--active) {
  color: #4c4c4c;
  font-weight: bold;
}
</style>
